<template>
	<view class="r-con">
		<view class="prewCon" >
			<view :style="[style]" class="prew" v-for="(item, index) in urlList" :key="index" @tap="previv(index)">
				<image :src="item.src" @error="$imgerr($event, urlList, index,'src')"  mode="scaleToFill"></image>
				<view class="delImg" v-show="edit" @tap.stop="delImg(index)">
					<image src="../../static/img/close.png" mode="scaleToFill"></image>
				</view>
			</view>
		</view>
		
		<!-- 图片上传 -->
		<view :style="[style]"  class="add" @tap="upImg" v-if="urlList.length < count && edit">
			<view class="addtext">
				<text class="iconfont icon-add" ></text>
			</view>
		</view>
		
		 <canvas style="display: none;" id="canvas"  canvas-id="canvas"
		      width="610"
		      height="610"
		      class="canvas"
		      onTouchStart="log"
		      onTouchMove="log"
		      onTouchEnd="log"
		    />
		
	</view>
</template>

<script>

/**
 * 图片上传组件
 * count {Number} 图片限制张数
 * imgs {Array}:[{src:url}，{src:url2},...] 初始图片赋值 
 * getImgArr {function} 获取选择的图片列表 通过$refs调用
 * 
 * icon-add 字体图标
 */
export default {
	data() {
		return {
			isEnv:'',
			urlList:[],
			isLoading:false
		};
	},
	created() {
		// #ifdef MP-ALIPAY
		this.isEnv = 'zfb'
		// #endif
	},
	computed:{
		sizeObj(){
			let {w,h} = this.size
			w = w ? w : 60
			h = h ? h : 60
			return {w,h}
		},
		style(){
			return{
				height: this.sizeObj.h +'px',
				width: this.sizeObj.w +'px',
				'line-height':this.sizeObj.h+'px'
			}
		},
	},
	props: {
		edit:{ // 是否可编辑
			type:Boolean,
			default:true
		},
		count:{
			type:Number,
			default:2
		},
		size:{
			type:Object,
			default:()=>({w:60,h:60})
		}
	},
	methods:{
		imgs(list){ // 初始图片赋值
			this.urlList = list
		},
		previv(index){ 
			let url = this.urlList[index].src
			uni.previewImage({urls:[url]})
		},
		delImg(index){
			this.urlList.splice(index,1)
		},
		draw(res){
			return new Promise((resolve, reject)=>{
				const {width, height} = res
				let canvas = my.createCanvasContext("canvas");
				canvas.drawImage(res.path, 0, 0, width, height);
				canvas.draw(false, async () => {
					let base64 = await canvas.toDataURL({
					    width, height, quality: 1,
					});
					this.base64 = base64;
					base64 = base64.replace("data:image/png;base64,", "");
					resolve(base64)
				});
			})
		},
		upImg(){ 
			if(this.isLoading) return
			let _this = this
			
			uni.chooseImage({
				count:1,
				success:function(res){
					_this.isLoading = true
					console.log('chooseImage',res)
					if( res.tempFilePaths && res.tempFilePaths.length){
						const src = res.tempFilePaths[0] 
						// 支付宝小程序 先上传到服务器 然后获取路径返回 返回base64码
						if(_this.isEnv === 'zfb'){
							my.getImageInfo({
								src,
								success:async imginfo=>{
									const base64 = await _this.draw(imginfo)
									_this.urlList.push({file:res,src,base64});
									_this.isLoading = false
								},
								fail(err){
									console.log('getImageInfo-err',err)
									_this.isLoading = false
								}
							})
							return
						}
						
						// 微信小程序平台 字节跳动小程序平台 QQ小程序平台 百度小程序
						uni.getFileSystemManager().readFile({
							filePath: src, //选择图片返回的相对路径  
							encoding: 'base64', //编码格式  
							success: v=> { //成功的回调  
								console.log('readFile',v)
								let base64 =  v.data // 返回的是没有 'data:image/jpeg;base64,'头的数据, 有需要可自行追加上                                 
								_this.urlList.push({file:res,src,base64});
								_this.isLoading = false
							},fail:(err)=>{
								console.log('readFile-fail',err)
								_this.isLoading = false
							}  
						})  
					}
				},
				fail:(err)=>{
					console.log('err',err)
					
				} 
			})
		},
		getImgArr(){ // 获取选择的图片
			return this.urlList
		}
	}
};
</script>

<style scoped>
	.r-con{
		display: flex;
		flex-wrap: wrap;
	}
	.prewCon{
		display: flex;
		flex-wrap: wrap;
	}
	.prew{
		position: relative;
		height: 60px;
		width: 60px;
		margin-right: 10px;
		margin-bottom: 5px;
		border-radius: 5px;
	}
	.prew image{
		width: 100%;
		height: 100%;
		border-radius: 5px;
	}
	.delImg{
		position: absolute;
		width: 16px;
		height: 16px;
		right: -6px;
		top: -6px;
		border-radius: 50%;
		color: white;
		line-height: 1 !important;
	}
	.delImg image{
		
	}
	.add{
		width: 100%;
		height: 100%;
		text-align: center;
		/* background-color: rgba(242, 242, 242, 1) */
		border: 1px solid #8c8d98;
		border-radius: 5px;
	}
	.icon-add{
		font-size: 34px;
		font-weight: bold;
	}
</style>
